<template>
  <div class="item-list">
	<img src="../../../static/images/arrow-left.png" class="arr" alt="返回" @click="router.back()"/>
    <!-- 单个列表项 - 使用flex布局使内容和箭头在同一行 -->
    <div class="item" @click="go(item)" v-for="item in zhiJieList" :key="item.id">
      <!-- 左侧内容区域 -->
      <div class="content">
        <div>
          <span class="label">采购单号:</span>
          <span class="value">{{ item.code }}</span>
           &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
          <span class="value">{{ statusMap[item.status] || '未知状态' }}</span>
        </div>
        <div>
          <span class="label">供应商:</span>
          <span class="value">{{ item.supplier }}</span>
        </div>
        <div>
          <span class="label">采购日期:</span>
          <span class="value">{{ formatDate(item.createTime) }}</span>
        </div>
      </div>
      
      <!-- 右侧箭头 - 固定在右侧 -->
      <img src="../../../static/images/arrow-right.png" class="arr" alt="查看详情"/>
    </div>
    
    <!-- 空数据提示 -->
    <div class="empty-tip" v-if="zhiJieList.length === 0">
      暂无直接出库数据
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { queryZhiJie } from '@/api/instore'

const router = useRouter();
const zhiJieList = ref([]);

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return "暂无数据";
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} `;
};
//完成情况状态映射
const statusMap = {
  1: '未完成',
  2: '部分完成',
  3: '已完成'
};

// 跳转详情页
function go(currentItem) {
  if (currentItem.id) {
    router.push({ 
      path: "/outitem", 
      query: { "id": currentItem.id }
      
    });
  }
}

// 查询数据
async function selectZJ(params) {
  try {
    const res = await queryZhiJie(params);
    console.log(res);
    
    if (res.code === 200 && Array.isArray(res.data)) {
      zhiJieList.value = res.data;
    } else {
      zhiJieList.value = [];
    }
  } catch (error) {
    zhiJieList.value = [];
    console.error("数据查询失败：", error);
  }
}

onMounted(() => {
  selectZJ();
})
</script>

<style scoped>
.item-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* 关键：使用flex布局让内容和箭头在同一行 */
.item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

/* 内容区域占满剩余空间 */
.content {
  flex: 1; /* 让内容区域自动填充剩余空间 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label {
  display: inline-block;
  width: 80px;
  color: #666;
  font-size: 14px;
}

.value {
  color: #333;
  font-size: 14px;
}

/* 箭头固定在右侧 */
.arr {
  width: 16px;
  height: 16px;
  margin-left: 16px; /* 与内容保持距离 */
  opacity: 0.6;
  transition: opacity 0.2s;
}

.item:hover .arr {
  opacity: 1;
}

.empty-tip {
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 14px;
  background: #fafafa;
  border-radius: 8px;
}

/* 响应式处理 - 小屏幕自动调整 */
@media (max-width: 768px) {
  .label {
    width: 70px;
    font-size: 12px;
  }
  .value {
    font-size: 12px;
  }
}
</style>
